<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本值相关操作</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
    </style>
    <script src="jQuery/jquery-3.4.1.js"></script>
    <script>
         $(function () {
             /*
             1.html([val|fn])
             与原生JS的innerHTML一模一样
             2.text([val|fn])
             与原生JS的innerTEXT一模一样
             3.val([val|fn|arr])

              */
             var btn=document.getElementsByTagName("button");
             btn[0].onclick=function () {
                $("div").html("<p>我是段落<span>我是span</span></p>");
             }
             btn[1].onclick=function () {
                 console.log($("div").html());
             }
             btn[2].onclick=function () {
                $("div").text("<p>我是段落<span>我是span</span></p>");
             }
             btn[3].onclick=function () {
                 console.log($("div").text());
             }
             btn[4].onclick=function () {
                $("input").val("请输入内容");
             }
             btn[5].onclick=function () {
                 console.log($("input").val());
             }
         })
    </script>
</head>
<body>
<button>设置html</button>
<button>获取html</button>
<button>设置text</button>
<button>获取text</button>
<button>设置value</button>
<button>获取value</button>
<div></div>
<input type="text">
</body>
</html>